<!doctype html><html lang="en"
  >
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Image Processing - 忆尘博客</title><link rel="apple-touch-icon" href="/images/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/images/favicons/manifest.json">
<link rel="icon" href="/images/favicons/favicon.ico">
<meta name="keywords" content="" />
<meta name="description" content="Guide to resize and align images" /><meta itemprop="name" content="Image Processing">
<meta itemprop="description" content="Guide to resize and align images"><meta itemprop="datePublished" content="2021-08-15T14:19:06+08:00" />
<meta itemprop="dateModified" content="2021-08-15T14:19:06+08:00" />
<meta itemprop="wordCount" content="163"><meta itemprop="image" content="/images/center.png">
<meta itemprop="keywords" content="Image," /><meta property="og:title" content="Image Processing" />
<meta property="og:description" content="Guide to resize and align images" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/en/posts/image-processing/" /><meta property="og:image" content="/images/center.png" /><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2021-08-15T14:19:06+08:00" />
<meta property="article:modified_time" content="2021-08-15T14:19:06+08:00" />
<meta property="og:see_also" content="/en/posts/diagram/" /><meta property="og:see_also" content="/en/posts/markdown-syntax/" /><meta property="og:see_also" content="/en/posts/shortcodes/alert/" /><meta property="og:see_also" content="/en/posts/shortcodes/media/" /><meta property="og:see_also" content="/en/posts/shortcodes/online-ide/" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="/images/center.png"/>

<meta name="twitter:title" content="Image Processing"/>
<meta name="twitter:description" content="Guide to resize and align images"/>
<meta name="twitter:site" content="@yourtwitterusername"/>
<link rel="preload" href="/css/bundle.min.fd4cecf242739163be984ae3de03d23c0bca36241435ac74374e102933e6797c.css" integrity="sha256-/Uzs8kJzkWO&#43;mErj3gPSPAvKNiQUNax0N04QKTPmeXw=" crossorigin="anonymous" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/bundle.min.fd4cecf242739163be984ae3de03d23c0bca36241435ac74374e102933e6797c.css" integrity="sha256-/Uzs8kJzkWO&#43;mErj3gPSPAvKNiQUNax0N04QKTPmeXw=" crossorigin="anonymous"></noscript><script src="/js/bundle.min.ba4b57bb653018b3da5a1e0ed23ac673e28c9f0624cc03f40d9c00568659899c.js" integrity="sha256-uktXu2UwGLPaWh4O0jrGc&#43;KMnwYkzAP0DZwAVoZZiZw=" crossorigin="anonymous"></script></head>
  <body><script src="/js/bootstrap.min.b5d86dd3a5f60c90be38a252bb65fc1a2732f32e71dc12c051720f0c7aef3cde.js" integrity="sha256-tdht06X2DJC&#43;OKJSu2X8Gicy8y5x3BLAUXIPDHrvPN4=" crossorigin="anonymous"></script><header><nav class="navbar top-app-bar top-app-bar-expand-lg fixed-top">
  <div class="container">
    <button class="navbar-settings me-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings"
  aria-controls="offcanvasSettings" aria-label="Toggle settings">
  <i class="fas fa-bars"></i>
</button>

<div class="offcanvas offcanvas-start surface" tabindex="-1" id="offcanvasSettings" aria-labelledby="offcanvasSettings">
  <div class="offcanvas-header">
    <h3 class="offcanvas-title">Settings</h3>
    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-dismiss="offcanvas" aria-label="Close">
      <i class="fas fa-times"></i>
    </button>
  </div>
  <div class="offcanvas-body"><section class="setting">
  <form class="row">
    <div class="col-auto">
      <label for="fontSize" class="form-label"><i class="fas fa-fw fa-language"></i> Language</label>
    </div>
    <div class="col-auto ms-auto">
      <div class="dropdown">
        <a class="btn btn-sm btn-outline-primary dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          English
        </a>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown"><li><a class="dropdown-item" href="/fr/">Français</a></li><li><a class="dropdown-item" href="/zh-tw/">繁體中文</a></li><li><a class="dropdown-item" href="/zh-cn/">简体中文</a></li></ul>
      </div>
    </div>
  </form>
</section>


<section class="setting">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-adjust"></i> Mode</label>
    </div>
    <div class="col-auto ms-auto">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" id="modeSwitcher">
      </div>
    </div>
  </form>
</section>

<section class="setting">
  <form class="font-size-switcher-form row">
    <div class="col-auto">
      <label for="fontSize" class="form-label"><i class="fas fa-fw fa-font"></i> Font Size</label>
    </div>
    <div class="col-auto ms-auto">
      <input type="range" class="form-range" min="-2" max="2" id="fontSize">
    </div>
  </form>
</section>


<section class="setting palettes">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-palette"></i> Palette</label>
    </div>
    <div class="col-auto ms-auto">
      <a id="btnPalette" class="btn btn-sm btn-outline-primary" role="button" aria-label="palettePicker">
        <i class="fas fa-eye-dropper"></i>
      </a>
    </div>
  </form>
  <div class="mt-2 d-flex visually-hidden" id="palettePicker"><button type="button" id="palette-blue" aria-label="Blue"
        class="btn btn-sm palette" data-palette="blue">
      </button><button type="button" id="palette-blue-gray" aria-label="Blue Gray"
        class="btn btn-sm palette" data-palette="blue-gray">
      </button><button type="button" id="palette-brown" aria-label="Brown"
        class="btn btn-sm palette" data-palette="brown">
      </button><button type="button" id="palette-cyan" aria-label="Cyan"
        class="btn btn-sm palette" data-palette="cyan">
      </button><button type="button" id="palette-green" aria-label="Green"
        class="btn btn-sm palette" data-palette="green">
      </button><button type="button" id="palette-indigo" aria-label="Indigo"
        class="btn btn-sm palette" data-palette="indigo">
      </button><button type="button" id="palette-orange" aria-label="Orange"
        class="btn btn-sm palette" data-palette="orange">
      </button><button type="button" id="palette-pink" aria-label="Pink"
        class="btn btn-sm palette" data-palette="pink">
      </button><button type="button" id="palette-purple" aria-label="Purple"
        class="btn btn-sm palette" data-palette="purple">
      </button><button type="button" id="palette-red" aria-label="Red"
        class="btn btn-sm palette" data-palette="red">
      </button><button type="button" id="palette-teal" aria-label="Teal"
        class="btn btn-sm palette" data-palette="teal">
      </button><button type="button" id="palette-yellow" aria-label="Yellow"
        class="btn btn-sm palette" data-palette="yellow">
      </button></div>
</section>
<section class="setting social-share">
  <form class="row">
    <div class="col-auto">
      <label><i class="fas fa-fw fa-share-alt"></i> Share</label>
    </div>
    <div class="col-auto ms-auto">
      <a class="btn btn-sm btn-outline-primary btn-social-share"><i class="fas fa-share"></i></a>
    </div>
  </form>
  <div class="mt-2 social-share-buttons d-flex visually-hidden flex-nowrap">
    <a class="btn btn-sm btn-outline-primary social-share-button" rel="noopener noreferrer" aria-label="Twitter Share Button"
      target="_blank" href="https://twitter.com/intent/tweet?title=Image%20Processing&url=%2fen%2fposts%2fimage-processing%2f">
      <i class="fab fa-fw fa-twitter"></i> Twitter
    </a>
    <a class="btn btn-sm btn-outline-primary social-share-button" rel="noopener noreferrer" aria-label="Facebook Share Button"
      target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=%2fen%2fposts%2fimage-processing%2f">
      <i class="fab fa-fw fa-facebook-f"></i> Facebook
    </a>
  </div>
</section>

</div>
</div>
<a class="navbar-brand me-3" href="/en/"><img class="logo" alt="Logo" src="/images/logo.webp" loading="lazy"
   width="136" height="69"
   />
忆尘
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <i class="fas fa-ellipsis-v"></i>
    </button>
    <div class="collapse navbar-collapse" tabindex="-1" id="navbarSupportedContent" aria-labelledby="navbarSupportedContent">
      <form class="search-bar my-1" action="/en/search">
  <div class="input-group input-group-sm">
    <span class="btn btn-search disabled position-absolute left-0"><i class="fas fa-fw fa-search"></i></span>
    <input class="form-control rounded-pill" name="q" type="search" aria-label="Search">
  </div>
</form>

      <ul class="navbar-nav ms-auto"><li class="nav-item">
          <a class="nav-link" href="/en/archives/">
            <i class="fas fa-fw fa-file-archive"></i>Archives
          </a>
        </li><li class="nav-item">
          <a class="nav-link" href="/en/categories/">
            <i class="fas fa-fw fa-folder"></i>Categories
          </a>
        </li><li class="nav-item">
          <a class="nav-link" href="/en/tags/">
            <i class="fas fa-fw fa-tags"></i>Tags
          </a>
        </li><li class="nav-item">
          <a class="nav-link" href="/en/series/">
            <i class="fas fa-fw fa-columns"></i>Series
          </a>
        </li><li class="nav-item dropdown">
          <a class="nav-link" id="navbarDropdown-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-fw fa-chevron-circle-down"></i>Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown-dropdown"><li>
              <a class="dropdown-item"
                href="https://github.com/razonyang/hugo-theme-bootstrap" target="_blank" rel="noopener noreferrer">
                <i class="fab fa-fw fa-github"></i>Github
              </a>
            </li><li>
              <a class="dropdown-item"
                href="/en/series/manual">
                Manual
              </a>
            </li></ul>
        </li></ul>
    </div>
  </div>
</nav>
</header>
<main role="main" class="container">
      <div class="row content">
<div class="col-lg-8">
  <div class="container"><nav class="row card component" aria-label="breadcrumb">
  <div class="card-body">
    <ol class="breadcrumb "><li class="breadcrumb-item"><a href="/en/">Home</a></li><li class="breadcrumb-item"><a href="/en/posts/">Posts</a></li><li class="breadcrumb-item active">Image Processing</li></ol>
  </div>
</nav><article class="post row card mb-4 component">
  <div class="card-body"><div class="post-panel-wrapper">
  <div class="post-panel d-flex flex-column">
    <a id="sidebarToggler" class="action d-none d-lg-block" role="button">
  <i class="fas fa-fw fa-expand-arrows-alt"></i>
</a>
  
    

    <a class="action btn-reward" role="button" data-bs-toggle="modal" data-bs-target="#rewardModal" title="Buy me a coffee">
  <i class="fas fa-fw fa-coffee"></i>
</a>
    <a class="action" data-bs-container="body" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="bottom"
  data-bs-trigger="focus" tabindex="0" type="button" aria-label="Copyright" 
  data-bs-content="&lt;a target=&#34;_blank&#34; rel=&#34;license noopener noreferrer&#34; href=&#34;https://creativecommons.org/licenses/by-nc-nd/4.0/deed.en&#34;&gt;CC BY-NC-ND 4.0 &lt;i class=&#34;fab fa-fw fa-creative-commons&#34;&gt;&lt;/i&gt;&lt;i class=&#34;fab fa-fw fa-creative-commons-by&#34;&gt;&lt;/i&gt;&lt;i class=&#34;fab fa-fw fa-creative-commons-nc&#34;&gt;&lt;/i&gt;&lt;i class=&#34;fab fa-fw fa-creative-commons-nd&#34;&gt;&lt;/i&gt;&lt;/a&gt;
">
  <i class="fas fa-fw fa-copyright"></i>
</a>
    
  </div>
</div>
<h1 class="card-title my-3">Image Processing
</h1><div class="post-meta"><span class="post-date" title="created on">
    <i class="fas fa-fw fa-calendar-alt"></i>Aug 15, 2021
  </span><span class="post-reading-time" title="reading time">
    <i class="fas fa-fw fa-coffee"></i>1 min read
  </span><a href="/en/categories/markdown/" class="post-taxonomy">Markdown</a><a href="/en/series/manual/" class="post-taxonomy">Manual</a><a href="/en/tags/image/" class="post-taxonomy">Image</a></div>
<div class="post-content mb-3"><p>This article offers some use cases for showing how to resize and align images.</p>
<h2 id="resizing-images">Resizing Images</h2>
<p>We use the URL query of image for resizing images. For example:</p>
<h3 id="specify-the-width-and-preserve-ratio">Specify the width and preserve ratio</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="ln">1</span>![<span class="nt">Resize</span>](<span class="na">images/sample.png?width=300px</span>)
</code></pre></div><p>
  <img class="img-fluid" alt="Resize" src="/en/posts/image-processing/images/sample_hu02d4214244b58f4d9dfd2bf839db7a24_12390_300x0_resize_box_3.png" loading="lazy"
   width="300" height="300"
   />

</p>
<h3 id="specify-the-height-and-preserve-ratio">Specify the height and preserve ratio</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="ln">1</span>![<span class="nt">Resize</span>](<span class="na">images/sample.png?height=200px</span>)
</code></pre></div><p>
  <img class="img-fluid" alt="Resize" src="/en/posts/image-processing/images/sample_hu02d4214244b58f4d9dfd2bf839db7a24_12390_0x200_resize_box_3.png" loading="lazy"
   width="200" height="200"
   />

</p>
<h3 id="specify-the-width-and-height">Specify the width and height</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="ln">1</span>![<span class="nt">Resize</span>](<span class="na">images/sample.png?width=300px&amp;height=200px</span>)
</code></pre></div><p><img class="img-fluid" alt="Resize" src="/en/posts/image-processing/images/sample_hu02d4214244b58f4d9dfd2bf839db7a24_12390_300x200_resize_box_3.png" loading="lazy"
   width="300" height="200"
   />

</p>
<blockquote>
<p>It can be used not only for <a href="https://gohugo.io/content-management/page-resources/" target="_blank" rel="noopener noreferrer">page resources</a>
, but also for the <strong>static</strong> images and external images.
However, in addition to page resources, others are resized by inline style, that is, their original size will not change.</p>
</blockquote>
<h2 id="aligning-images">Aligning Images</h2>
<p>We can easily align images by adding URL fragments. Such as <code>#center</code>, <code>#floatleft</code> and <code>#floatright</code> represents align center, float left and float right respectively.</p>
<h3 id="center">Center</h3>
<p>Adding the <code>#center</code> fragment for aligning images to the center.</p>
<p>For example: <code>![Center](/images/center.png#center)</code>.</p>
<p><img class="img-fluid mx-auto d-block" alt="Center" src="/en/posts/image-processing/images/center.png" loading="lazy"
   width="120" height="69"
   />

</p>
<h3 id="float-left">Float Left</h3>
<p><img class="img-fluid float-start me-2" alt="Float Left" src="/en/posts/image-processing/images/left.png" loading="lazy"
   width="120" height="69"
   />

</p>
<p>Adding the <code>#floatleft</code> fragment for floating images to the left.</p>
<p>For example: <code>![Float Left](/images/left.png#floatleft)</code>.</p>
<h3 id="float-right">Float Right</h3>
<p><img class="img-fluid float-end ms-2" alt="Float Right" src="/en/posts/image-processing/images/right.png" loading="lazy"
   width="120" height="69"
   />

</p>
<p>Similarly, we can also float images to the right by adding the <code>#floatright</code> fragment.</p>
<p>For example: <code>![Float Right](/images/right.png#floatright)</code>.</p></div><div class="modal fade" id="rewardModal" tabindex="-1" aria-labelledby="rewardModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content surface">
      <div class="modal-header">
        <h5 class="modal-title" id="rewardModalLabel"><i class="fas fa-fw fa-coffee"></i>Buy me a coffee</h5>
        <a href="#" data-bs-dismiss="modal" class="btn btn-sm btn-outline-primary" aria-label="Close"><i class="fas fa-times"></i></a>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs flex-nowrap mb-3" role="tablist"><li class="nav-item text-nowrap" role="presentation">
            <a class="nav-link active" id="reward-alipay-tab" data-bs-toggle="tab" href="#reward-alipay" role="tab" aria-controls="reward-alipay" aria-selected="true">
              <i class="fab fa-fw fa-alipay"></i>Alipay
            </a>
          </li><li class="nav-item text-nowrap" role="presentation">
            <a class="nav-link" id="reward-wechat-tab" data-bs-toggle="tab" href="#reward-wechat" role="tab" aria-controls="reward-wechat" aria-selected="true">
              <i class="fab fa-fw fa-weixin"></i>WeChat
            </a>
          </li></ul>
        <div class="tab-content" id="rewardTabContent"><div class="tab-pane fade post-reward-content show active" id="reward-alipay" role="tabpanel" aria-labelledby="reward-alipay-tab">
            <img class="img-fluid post-reward-img" src="/images/reward/alipay.png" loading="lazy" />
          </div><div class="tab-pane fade post-reward-content show" id="reward-wechat" role="tabpanel" aria-labelledby="reward-wechat-tab">
            <img class="img-fluid post-reward-img" src="/images/reward/wechat.png" loading="lazy" />
          </div></div>
      </div>
    </div>
  </div>
</div><hr /><div class="post-navs d-flex mb-3 justify-content-evenly">
  <div class="post-nav post-prev"><i class="fas fa-fw fa-chevron-left"></i>
    <a href="/en/posts/markdown-syntax/">Markdown Syntax Guide
</a>
  </div><div class="post-nav post-next">
    <a href="/en/posts/diagram/">Diagram Guide
</a>
    <i class="fas fa-fw fa-chevron-right"></i>
  </div></div><section class="related-posts-wrapper">
    <h3>Related Posts</h3>
    <ul class="related-posts"><li><a href="/en/posts/markdown-syntax/">Markdown Syntax Guide
</a></li><li><a href="/en/posts/shortcodes/alert/">Alert Shortcode
</a></li><li><a href="/en/posts/shortcodes/media/">Media Shortcodes
</a></li><li><a href="/en/posts/shortcodes/online-ide/">Online IDE Shortcodes
</a></li><li><a href="/en/posts/rich-content/">Rich Content
</a></li></ul>
  </section></div>
</article><div class="post-comments card row component">
  <div class="card-body"><script src="https://utteranc.es/client.js"
  repo="razonyang/hugo-theme-bootstrap-comments"
  issue-term="pathname"
  label="comment"
  theme="github-light"
  crossorigin="anonymous"
  async>
</script></div>
</div></div>
</div><aside class="col-lg-4 sidebar d-flex">
  <div class="container">
    
    <section class="card row text-center profile component">
  <div class="card-body">
    <div class="col-12 d-flex align-items-center justify-content-center"><img class="profile-avatar rounded-circle" alt="Yi Chen" src="/images/profile.webp" loading="lazy"
   width="400" height="400"
   />
</div>
    <div class="col-12 profile-meta"><div class="profile-name">Yi Chen</div><div class="profile-bio">好记性不如烂笔头.</div><div class="profile-company"><i class="fas fa-fw fa-building"></i>无</div><div class="profile-location"><i class="fas fa-fw fa-map-marker-alt"></i>福州</div><div class="profile-about"><i class="fas fa-fw fa-user"></i><a href="/en/about/">About</a></div></div>
  </div>
</section>
  <section class="featured-posts row card component">
    <div class="card-body">
      <h2 class="card-title">Featured Posts</h2>
      <ul><li><a href="/en/posts/markdown-syntax/">Markdown Syntax Guide
</a></li><li><a href="/en/posts/shortcodes/media/">Media Shortcodes
</a></li><li><a href="/en/posts/shortcodes/online-ide/">Online IDE Shortcodes
</a></li><li><a href="/en/posts/rich-content/">Rich Content
</a></li></ul>
    </div>
  </section><section class="recent-posts row card component">
  <div class="card-body">
    <h2 class="card-title">Recent Posts</h2>
    <ul><li><a href="/en/posts/diagram/">Diagram Guide
</a></li><li><a href="/en/posts/image-processing/">Image Processing
</a></li><li><a href="/en/posts/markdown-syntax/">Markdown Syntax Guide
</a></li><li><a href="/en/posts/shortcodes/alert/">Alert Shortcode
</a></li><li><a href="/en/posts/shortcodes/media/">Media Shortcodes
</a></li></ul>
  </div>
</section><section class="taxonomies row card component">
      <div class="card-body">
        <h2 class="card-title">
          <a href="/en/categories">Categories</a>
        </h2>
        <div><a href="/en/categories/shortcode/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Shortcode">
            Shortcode
          </a><a href="/en/categories/markdown/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Markdown">
            Markdown
          </a></div>
      </div>
    </section><section class="taxonomies row card component">
      <div class="card-body">
        <h2 class="card-title">
          <a href="/en/series">Series</a>
        </h2>
        <div><a href="/en/series/manual/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Manual">
            Manual
          </a></div>
      </div>
    </section><section class="taxonomies row card component">
      <div class="card-body">
        <h2 class="card-title">
          <a href="/en/tags">Tags</a>
        </h2>
        <div><a href="/en/tags/markdown/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Markdown">
            Markdown
          </a><a href="/en/tags/alert/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Alert">
            Alert
          </a><a href="/en/tags/bilibili/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Bilibili">
            Bilibili
          </a><a href="/en/tags/codepen/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="CodePen">
            CodePen
          </a><a href="/en/tags/css/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="CSS">
            CSS
          </a><a href="/en/tags/diagram/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Diagram">
            Diagram
          </a><a href="/en/tags/emoji/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Emoji">
            Emoji
          </a><a href="/en/tags/html/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="HTML">
            HTML
          </a><a href="/en/tags/image/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Image">
            Image
          </a><a href="/en/tags/instagram/" class="post-taxonomy rounded btn btn-sm btn-outline-primary me-2 mb-2" title="Instagram">
            Instagram
          </a></div>
      </div>
    </section>
    
  </div>
</aside>
</div>
    </main><footer class="footer mt-auto py-3 text-center container"><nav class="social-links nav my-2 justify-content-center"><a class="nav-link social-link" target="_blank" href="https://space.bilibili.com/yourbilibiliuserid" title="bilibili" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fas fa-tv"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://bitbucket.org/yourbitbucketworkspaceid" title="Bitbucket" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-bitbucket"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://discord.com/invite/yourdiscordinvitecode" title="Discord" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-discord"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://yourforum.tld" title="Discourse" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-discourse"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://hub.docker.com/u/yourdockerhubusername" title="Docker Hub" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-docker"></i>
      </a><a class="nav-link social-link" href="mailto:user@domain.tld" title="Email">
      <i class="fas fa-fw fa-2x fa-envelope"></i>
    </a><a class="nav-link social-link" target="_blank" href="https://facebook.com/yourfacebookusername" title="Facebook" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-facebook-f"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://facebook.com/groups/yourfacebookgroupname" title="Facebook Group" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-facebook-square"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://github.com/yourgithubusername" title="GitHub" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-github"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://gitlab.com/yourgitlabusername" title="GitLab" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-gitlab"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.instagram.com/yourinstagramusername" title="Instagram" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-instagram"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://kaggle.com/yourkaggleusername" title="Kaggle" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-kaggle"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.last.fm/user/yourlastfmusername" title="Last.fm" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-lastfm"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://linkedin.com/yourlinkedinusername" title="LinkedIn" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-linkedin-in"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://medium.com/@yourmediumusername" title="Medium" rel="noopener noreferrer">
        <i class="fab fa-fw fa-2x fa-medium-m"></i>
      </a><a class="nav-link social-link" target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=yourqqnumber&amp;site=qq&amp;menu=yes" title="QQ" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-qq"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.quora.com/profile/yourquorausername" title="Quora" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-quora"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.reddit.com/user/yourredditusername" title="Reddit" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-reddit"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://stackoverflow.com/users/yourstackoverflowuserid" title="Stack Overflow" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-stack-overflow"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://t.me/yourtelegramusername" title="Telegram" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-telegram-plane"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.tiktok.com/@yourtiktokusername" title="TikTok" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-tiktok"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://yourtumblrusername.tumblr.com" title="Tumblr" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-tumblr"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://twitter.com/yourtwitterusername" title="Twitter" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-twitter"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://weibo.com/yourweibousername" title="Weibo" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-weibo"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.youtube.com/channel/youryoutubechannelid" title="Youtube" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-youtube"></i>
      </a><a class="nav-link social-link" target="_blank" href="https://www.zhihu.com/people/yourzhihuusername" title="Zhihu" rel="noopener noreferrer">
        <i class="fa-fw fa-2x fab fa-zhihu"></i>
      </a></nav>
<div class="copyright mb-2">
  忆尘博客 © 2021-2021 Yi Chen. 版权所有.
</div>
</footer>

</body>
</html>
